<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../css/index.css">
  <title>Document</title>
  <style>
    
    table {
        width: 100%;
        border-collapse: collapse;
    }
    table, th, td {
        border: 1px solid #ddd;
    }
    th, td {
        padding: 10px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
    tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    tr:hover {
        background-color: #eaeaea;
    }
    button {
        padding: 5px 10px;
        margin: 5px;
        cursor: pointer;
    }
    h1{
        text-align: center;
    }
    /* 在 <head> 的样式部分 */
      .watermark {
        display: none;           /* 默认水印不显示 */
        position: absolute;       /* 绝对定位 */
        top: 0;                  /* 定位到顶部 */
        left: 0;                 /* 定位到左侧 */
        width: 100%;             /* 宽度充满整行 */
        height: 100%;            /* 高度充满整行 */
        background-color: rgba(255, 0, 0, 0.3); /* 红色背景，半透明 */
        color: black;            /* 文字颜色 */
        text-align: center; 
        align-items: center;           /* 垂直居中 */    /* 文字居中 */
        vertical-align: middle;   /* 垂直居中 */
        font-weight: bold;        /* 加粗字体 */
        font-size: 20px;          /* 字体大小 */
        z-index: 0;              /* 确保水印在行之上 */
    }
</style>
</head>
<body>
  <div class="grid">
  
    <aside class="sidenav">
      <div class="sidenav__brand">
        <i class="fas fa-feather-alt sidenav__brand-icon"></i>
        <a class="sidenav__brand-link" href="#">物资调配<span class="text-light">管理系统</span></a>
        <i class="fas fa-times sidenav__brand-close"></i>
      </div>
      <div class="sidenav__profile">
        <div class="sidenav__profile-avatar"></div>
        <div class="sidenav__profile-title text-light">用户</div>
      </div>
      <div class="row row--align-v-center row--align-h-center">
        <ul class="navList">
          <li class="navList__heading">功能列表<i class="far fa-file-alt"></i></li>
          <li>
            <div class="navList__subheading row row--align-v-center" id="index">
              
              <span class="navList__subheading-title">首页</span>
            </div>
            
          </li>  
          <li id="managementLi">
            <div class="navList__subheading row row--align-v-center" id="management">
              
              <span class="navList__subheading-title">物资调配数据管理</span>
            </div>
            
          </li>
          <li id="warehouseLi">
            <div class="navList__subheading row row--align-v-center" id="warehouse">
              
              <span class="navList__subheading-title">仓库数据管理</span>
            </div>
            
          </li>
          <li id="submitLi">
            <div class="navList__subheading row row--align-v-center" id="submit">
              
              <span class="navList__subheading-title">物资调配请求上传</span>
            </div>
          </li>
          <li id="statisticsLi">
            <div class="navList__subheading row row--align-v-center" id="province">
              
              <span class="navList__subheading-title">省份物资统计</span>
            </div>
            
          </li> 
        </ul>
      </div>
    </aside>
  
    <main class="main">
      
      <div class="main-overview">
        <div id="container">
        <body>
            <h1>物资调配请求管理</h1>
            <table id="requestTable">
                <thead>
                    <tr>
                        <th>请求ID</th>
                        <th>物资ID</th>
                        <th>物资种类</th>
                        <th>物资名称</th>
                        <th>数量</th>
                        <th>目的地</th>
                        <th>始发地</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 请求列表将通过JavaScript动态生成 -->
                </tbody>
            </table>
        
            <script>
                // 示例请求数据

                  var approvedRequestIds = JSON.parse(localStorage.getItem('approvedRequests')) || [];
                  var rejectedRequestIds = JSON.parse(localStorage.getItem('rejectedRequests')) || [];
                  console.log(approvedRequestIds);
                  console.log(rejectedRequestIds);
                  
                  var requests = localStorage.getItem('formData');
                  console.log(requests);
                  requests=JSON.parse(requests);
                  
                  function collectRowData(row) {
                    var cells = row.querySelectorAll('td');
                    var rowData = {
                      source_addr: cells[6].textContent, 
                      target_addr: cells[5].textContent ,
                      material_kind: [cells[2].textContent], 
                      material_number:[cells[4].textContent],
                    };
                    return rowData;
                }
                function addWatermark(row,isAgreed) {
                  if(isAgreed){
                    var watermark = document.createElement('div');
                    watermark.className = 'watermark';
                    watermark.textContent = '同意';

                    // 将水印的显示设为块级元素，以便它可以覆盖整行
                    watermark.style.display = 'flex';
                    watermark.style.justifyContent = 'center';
                    watermark.style.alignItems = 'center';
                    watermark.style.backgroundColor = 'rgba(76, 175, 80, 0.5)';
                    
                    var lastCell = row.querySelector('td:last-child');
                    lastCell.appendChild(watermark);

                    // 如果行没有定位，我们需要设置相对定位
                    row.style.position = 'relative';

                  }else{
                    var watermark = document.createElement('div');
                    watermark.className = 'watermark';
                    watermark.textContent = '不同意';

                    // 将水印的显示设为块级元素，以便它可以覆盖整行
                    watermark.style.display = 'flex';
                    watermark.style.justifyContent = 'center';
                    watermark.style.alignItems = 'center';
                    var lastCell = row.querySelector('td:last-child');
                    lastCell.appendChild(watermark);

                    // 如果行没有定位，我们需要设置相对定位
                    row.style.position = 'relative';

                  }
                  
              }
              var id=0;
                document.addEventListener('DOMContentLoaded', function() {
                    // 动态生成请求列表
                    var tableBody = document.getElementById('requestTable').getElementsByTagName('tbody')[0];
                    requests.forEach(function(request) {
                      var row = tableBody.insertRow();
                      var idCell = row.insertCell(0);
                      var goodsIdCell=row.insertCell(1);
                      var itemTypeCell = row.insertCell(2);
                      var itemNameCell = row.insertCell(3);
                      var quantityCell = row.insertCell(4);
                      var originCell = row.insertCell(5); 
                      var targetCell = row.insertCell(6);
                      var actionCell = row.insertCell(7);
                  
                      id++;
                      idCell.textContent = id;
                      //console.log(id);
                      goodsIdCell.textContent = request.id;
                      //var temp=id+"";
                      if (approvedRequestIds.includes(id)) {
                        addWatermark(row, true);
                      } else if (rejectedRequestIds.includes(id)) {
                        addWatermark(row, false);
                      }
                      // 添加操作按钮
                      var approveBtn = document.createElement('button');
                      itemTypeCell.textContent = request.itemType;
                      itemNameCell.textContent = request.itemName;
                      quantityCell.textContent = request.quantity;
                      originCell.textContent = request.origin; 
                      targetCell.textContent = request.target;
        
                        // 添加操作按钮
                        var approveBtn = document.createElement('button');
                        approveBtn.textContent = '同意';
                        approveBtn.addEventListener('click', function() {
                          addWatermark(row,true);
                          handleApproveRequest(id);
                        });
        
                        var rejectBtn = document.createElement('button');
                        rejectBtn.textContent = '不同意';
                        rejectBtn.addEventListener('click', function() {
                          addWatermark(row,false);
                          handleRejectRequest(id);
                      });
                        actionCell.appendChild(approveBtn);
                        actionCell.appendChild(rejectBtn);
                    });
                    function handleRejectRequest(requestId){
                      //let rejectedRequestIds = JSON.parse(localStorage.getItem('rejectedRequests')) || [];
                      rejectedRequestIds.push(requestId);
                      localStorage.setItem('rejectedRequests', JSON.stringify(rejectedRequestIds));
                    }
                    function handleApproveRequest(requestId) {
                        // 实现同意请求的逻辑
                        alert('已同意请求: ');
                        //let approvedRequestIds = JSON.parse(localStorage.getItem('approvedRequests')) || [];
                        approvedRequestIds.push(requestId);
                        localStorage.setItem('approvedRequests', JSON.stringify(approvedRequestIds));
                        console.log(JSON.stringify(approvedRequestIds));
                        // 这里应该发送请求到服务器更新状态
                        var row = event.target.parentNode.parentNode;
                        var rowData = collectRowData(row);
                        console.log(rowData);
                        var url='http://2c8ciz.natappfree.cc';
                        // 使用fetch发送同意请求到后端
                        fetch(url+'/material/plan', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(rowData)
                        })
                        .then(response => response.json())
                        .then(data => {
                            console.log('服务器响应：', data);
                            localStorage.setItem('searchData',JSON.stringify(data));
                            //alert('已同意请求ID: ' + requestId);
                        })
                        .catch(error => {
                            console.error('请求失败：', error);
                            alert('请求失败，请稍后重试');
                        });
                    }
        
                    
                });
            </script>
        </body>
         </div>
      </div> <!-- /.main__overview -->
    </main>
  
    <footer class="footer">
      <p><span class="footer__copyright">&copy;</span> 2024 management</p>
      <p>Crafted with <i class="fas fa-heart footer__icon"></i> by <a href="" target="_blank" class="footer__signature">@Horseman</a></p>
    </footer>
  </div>

  <script src="../js/template.js"></script>
</body>

</html>

